tags: Vue.js ItIron2020

前言

昨天我們利用了一個簡易的global store介紹了store的基礎概念，今天我們則要延伸那樣的資料集中管理概念，介紹vuex這個好用的小幫手! 事不宜遲，我們馬上開始吧!

什麼是Vuex

vuex是一個專門為vue專案開發的資料管理套件，可以為網站做全域的資料管理，就像我們昨天實作的store一樣! 差別是在vuex中則分為更細部state、mutations、actions等屬性，讓專案可以應付各種複雜的資料管理。 我們先看一張來自官方網站的圖片了解vuex的基本概念。

先將目光集中在Actions、Mutations、State and Components就好，簡單來說就是以下的流程

• Components 透過State內的資料render出畫面
• 資料需要變動時，透過Actions commit一個Mutation
• Mutation 變更 State中的資料
• Components 重新render變化後的結果

就像我們昨天講的store核心概念-你永遠不會在store外直接改動state的值
在vuex中你需要透過dispatch一個action去commit一個mutation才能改動state的值，一長串的新名詞簡直就是在繞口令，我知道初學的你們已經混亂了，跟著以下的實作相信會讓你們更清楚一些!

在vue-cli專案中加入vuex套件

當然你要在一般的vue專案中加入vuex也是可以的，透過yarn/npm甚至是CDN載入的方式都可以，不過這邊為了延續之前的說明，我們就在vue-cli打造的專案中加入vuex吧!
首先打開你的專案目錄，如果你是跟著做前兩天的專案的話，那就是iron-demo這個專案，打開你的終端機，並輸入以下的指令

vue add vuex

註: vue add 套件名稱 是在vue-cli中安裝套件的其中一個方法

看到這樣的畫面就表示你順利安裝了，此時你觀察一下左邊的專案結構有幾個變化

• main.js載入vuex

import Vue from 'vue'
import App from './App.vue'
import store from './store' // 這個

Vue.config.productionTip = false

new Vue({
  store, // 還有這個
  render: h => h(App)
}).$mount('#app')

• 新增store/index.js檔案

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

我們先將重點放在下方的store/index.js，點開後你會看到如上方的結構，其實就是我們昨天做的store的進階版而已，真的不用想太難? 我們先來看看state、mutations & actions屬性吧!

認識State

state就像我們昨天說過的一樣，它很單純就是一個有著store內所有資料的物件，把它想為整個應用程式的資料狀態也可以! 舉個例子來說，我們可以在裡面增加一個numbers陣列，就像我們昨天做的一樣!

state: {
  numbers: [1,3,5,7,9]
}

認識Mutations

Mutations其實就是包含著一堆函數的物件，每一個mutation就是一個函數，負責接收actions並更改state的資料，其中有幾個注意事項。

• mutation必定是同步函數，沒有例外
• mutation是vuex中唯一可以改動state的方法

也就是說在vuex中，如果你要改變state狀態，你一定要經過以下的流程

1. 發出一個action(dispatch an action)
2. 接收到action後，執行對應的mutation (commit a mutation)
3. 透過mutation更改state

你現在腦袋一定有著跟我相同的疑問，幹嘛這麼麻煩? 為什麼我不直接用actions去修改state的值就好了?

actions  ======> state

很遺憾的，你無法這樣做，原因在於同步&非同步的處理，很多時候我們會卡在一些非同步的計算、請求中，如果你將所有的邏輯都寫在同一個函數內，今天當有兩個不同的函數要操作同一個state資料，你要如何確保它們會按照你指定的順序完成呢?
於是我們需要多一層mutation的操作，先在aciton中處理可能的非同步請求，當取得對應的資料後，接著再透過mutation以處理同步的方式變更state的資料，這點較為抽象一些，可以參考我文章最後提供的參考資料，也許能讓人更容易了解一些!

現在你知道mutation的基本概念了，那我們實際寫一個簡單的mutation吧!
每一個mutation包含兩個參數

1. state 你可以自由取用或更動state的數值
2. payload 從actions傳來的參數

mutations: {
    ADD_NUMBER(state,payload) {
      state.numbers.push(payload)
    }
},

今天我們預期我們將從action那邊接到一個數字，這樣我們才有辦法將該數字推進原本的numbers陣列中，如果你預期action並不會傳入任何參數，那第二個參數自然可以不寫囉!

認識Actions

Actions就是為了呼叫Mutations而存在的東西，同樣有幾個事情你需要知道

• Actions可以是非同步函數
• 一個Action中可以觸發多個mutation

相對起來很單純，你只要記得我們需要透過action去呼叫mutaion就好了!
我們同樣實際寫個actions來看看吧! 每一個actions包含著兩個參數

1. context 是一個物件，裡面可以讓你使用store中的commit、getter或是state屬性
2. 想傳入mutation的參數，沒有要傳入則可省略

actions: {
    addNumber(context,number) {
      context.commit("ADD_NUMBER", number)
  }
}

你也可以透過es6的解構讓上方的寫法更簡便一些，我們在這次的action中只有需要使用到commit方法，那就可以將上方的寫法改為以下!

actions: {
    addNumber({commit},number) {
      commit("ADD_NUMBER", number)
    }
 }

如何? 是不是更輕鬆簡便了呢?

結語

我們今天介紹了vuex中的state、mutaions & actions，相信你對於它的基本結構有著一些認識了，當然其實你並不一定需要這樣的集中管理系統，在規模較小的時候其實之前介紹的資料溝通方式就足以應付了，不過這樣的flux資料管理方式在是許多前端框架共有的概念，實務上也真的相當常用，是個相當實用的工具! 今天就先到此為止，明天我們會繼續介紹剩下的東西! 大家佳節愉快!

此文章同步發布於個人部落格，有興趣的大大也可以來參觀一下:D

參考文章

vuex官方文件
Jacky的vuex筆記